<template>
  <canvas ref="canvas" class="absolute" />
</template>

<script setup lang="ts">
import { TowerCanvas, TowerConfig } from '@/composables/useCanvas/TowerCanvas'
import useSection from '@/composables/useSection'
import useTower from '@/composables/useTower'
import { onMounted, ref } from 'vue'

const canvas = ref<HTMLCanvasElement>()
const { sectionId } = defineProps<{
  sectionId: number
}>()

const { towers, all } = useTower()
const { find: findSection, calcCanvasAndHeight } = useSection()

onMounted(async () => {
  await all({ sectionId })
  await findSection(sectionId)

  const parent = canvas.value?.parentNode?.parentNode as any
  const { width, height, startY } = await calcCanvasAndHeight(parent!.offsetWidth, parent!.offsetHeight)

  const lst_towerConfig: TowerConfig[] = towers.value!.data.map((item) => ({
    tName: item.tName,
    tType: item.tType!,
    tStyle: item.tStyle,
    isNaiz: item.tType === 'N',
    altitude: item.altitude,
    x: JSON.parse(item.xy!)[0],
    y: JSON.parse(item.xy!)[1],
  }))

  const ctx = canvas.value?.getContext('2d')!
  new TowerCanvas(canvas.value!, ctx, width, height, startY, 40, lst_towerConfig).draw()
})
</script>
